<link rel="stylesheet" href="/assets/home/css/comment_list.css">

 <!-- wowjs  -->
 <link rel="stylesheet" href="/assets/home/plugin/wowjs/animate.min.css"/>
 <script src="/assets/home/plugin/wowjs/wow.min.js"></script>
 
 <!-- 下拉刷新 -->
 <link rel="stylesheet" href="/assets/home/plugin/mescroll/mescroll.min.css"/>
 <script src="/assets/home/plugin/mescroll/mescroll.min.js"></script>
 
 <!-- 引入http请求插件 -->
 <script src="/assets/home/plugin/axios/axios.min.js"></script>
 <script src="/assets/home/plugin/axios/request.js"></script>

    <!-- 评论内容 -->
     <div id="list">
    <ul class="mui-table-view list">
    </ul>
    </div>
</body>


<script>
    new WOW({
        boxClass: 'wow',      // 需要执行动画的元素的 class(默认是wow)
        animateClass: 'animated', // animation.css 动画的 class(默认是animated)
        offset: 0,          // 距离可视区域多少开始执行动画(默认为0)
        mobile: true,       // 是否在移动设备上执行动画(默认为true)
        live: true,       // 异步加载的内容是否有效(默认为true)
        callback: function (box) {
            // 每次动画启动时都会触发这个回调函数
            //传入的参数是动画DOM节点
            // console.log(box)
        },
        scrollContainer: "#list" // 可选滚动容器选择器，否则使用窗口
    }).init();

    var keywords = '';
    var page = 0; //当前页
    var limit = 10; //每页显示最大信息条数

    //修改浏览器自带的后退按钮
window.history.pushState(null, null, `#`);

window.addEventListener('popstate', function(e){
    e.preventDefault()
    location.href = `{:url('home/index/index')}` //退回 “我的” 主页面
}, false)

    $("input[name=search]").change(function(){
        keywords = $(this).val()
        DownCallback()
    })

    //配置下拉刷新和上拉加载
    var scroll = new MeScroll('list',{
        down: {
            auto: false, //是否在初始化完毕之后自动执行下拉回调callback; 默认true
            callback: DownCallback //下拉刷新的回调
        },
        up: {
            page: {
                num: page, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始
                size: limit //每页数据条数,默认10
            },
            auto: true, //是否在初始化时以上拉加载的方式自动加载第一页数据; 默认false
            isBounce: false, //此处禁止ios回弹,解析(务必认真阅读,特别是最后一点): http://www.mescroll.com/qa.html#q10
            callback: UpCallback, //上拉回调,此处可简写; 相当于 callback: function (page) { upCallback(page); }
            toTop:{ //配置回到顶部按钮
                duration: 300,
                        // public\assets\home\plugin\mescroll\mescroll-totop.png
                src : "/assets/home/plugin/mescroll/mescroll-totop.png", //默认滚动到1000px显示,可配置offset修改
                offset : 100,
                supportTap : true, //快速响应
            }
           
        }
    })

    // 下拉刷新回调
    function DownCallback()
    {
        scroll.resetUpScroll() 
        $('#list .list').empty()                    
    }

    // 上拉刷新回调
    async function UpCallback(current)
    {
        //当前页码值
        page = current.num
        limit = current.size

        //组装数据
        var data = {
            page:page,
            limit:limit,
            keywords:keywords
        };

        var result = await POST({
            url:'/comment/index',
            params: data
        })

        if(!result) return false

        if(result.code == 0)
        {
            mui.toast(result.msg, {duration: 1000})
            // 暂无更多数据
            scroll.endBySize(0, 0)
            return false
        }

        var list = result.data.list
        var count = result.data.count

        //设置上拉加载状态
        scroll.endBySize(list.length, count)
        FetchList(list)
    }

    // 追加渲染数据
    function FetchList(list)
    {   
        for(var item of list) 
        {   
            var rate = item.rate ? Math.abs(parseInt(item.rate)) : 0;
            var rate_temp = '';
            for(var i =1; i<=5 ; i++)
            {
                if(i <= rate)
                {
                    //红星
                    rate_temp += `<span>
                                <img src="/assets/home/images/rate_active.png" alt="">
                                </span>`
                }else
                {
                    //灰星
                    rate_temp += `<span>
                                <img src="/assets/home/images/rate.png" alt="">
                                </span>`
                }
            }
            var temp = `
                  <li class="mui-table-view-cell mui-media wow bounceIn" data-wow-delay="0.1s">
            <img class="mui-media-object mui-pull-left userimg" src="${item.subject.thumbs_text}">
            <div class="mui-media-body">
                <div class="header">
                    <span class="nickname">${item.business.nickname ? item.business.nickname : '用户' }</span>
                    对
                    <a class="course">${item.subject.title}</a>
                    评论：
                </div>
                <p>${item.content ? item.content : '暂无评论'}</p>
            </div>
        </li>
            `
            $('#list .list').append(temp)
        }
    }

</script>